<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      background: #aaa;
    }

    .bg,
    .pane {
      width: 800px;
      height: 800px;
      margin: 0 auto;
      overflow: hidden;
    }

    .bg {
      position: relative;
      background: url("src/assets/images/scan-area.png") no-repeat;
      background-size: 100% 100%;
      /*background-attachment: fixed;*/
      border: 1px solid #b0f9e4;
    }

    .pane {
      position: absolute;
      z-index: -1;
      background: url("src/assets/images/scan-line.png") no-repeat;
      background-size: 100% 100%;
      /*background-attachment: fixed;*/

      animation: move 1.5s ease-in-out infinite ;
      -webkit-animation: move 1.5s ease-in-out infinite;
    }
    @keyframes move {
      from{top:-200px}
      to{top:0}
    }
    -webkit-@keyframes move {
              from{top:-200px}
              to{top:0}
            }
  </style>
</head>
<body style="background-color: #000c17;">

<div class="bg">
  <div class="pane"></div>
</div>

</body>
</html>
